<template>
    <div>
        <el-card class="box-card" style="margin: 10px">
            挂号单ID &nbsp;<el-input placeholder="请输入挂号单" v-model="idcard" style="width: 50%;"></el-input>
            <el-button type="primary" icon="el-icon-search" v-on:click="dianji">查询</el-button>
            <el-button type="warning" icon="el-icon-search">读取IC卡</el-button>
        </el-card>

        <div v-show="xianshi">
          <el-card class="box-card" style="margin: 10px">
              <el-descriptions>
            <el-descriptions-item label="挂号单号">kooriookami</el-descriptions-item>
            <el-descriptions-item label="医生姓名">18100000000</el-descriptions-item>
            <el-descriptions-item label="科室名称">苏州市</el-descriptions-item>
          <el-descriptions-item label="患者姓名">苏州市</el-descriptions-item>
            <el-descriptions-item label="就诊时间">11</el-descriptions-item>
            <el-descriptions-item label="主诉"></el-descriptions-item>
            <el-descriptions-item label="诊断信息"></el-descriptions-item>
        </el-descriptions>
        </el-card>

          <el-card class="box-card" style="margin: 10px">
            <el-row>
          <el-button>默认按钮</el-button>
          <el-button type="primary" icon="el-icon-shopping-cart-full">全选</el-button>
          <el-button type="success" icon="el-icon-shopping-cart-2">取消全选</el-button>
        <el-button type="danger" icon="el-icon-files">现金</el-button>
        <el-button type="danger" icon="el-icon-mobile-phone" @click="pay" >

          移动支付
          </el-button>
          </el-row>
              </el-card>

                <el-card class="box-card" style="margin: 10px">
                  <el-row>
                      【检查处方】【1】【处方总额】:人民币100
                  </el-row>
                  <el-row>
                      【检查处方】【1】【处方总额】:人民币200
                  </el-row>
                  <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>

              <el-table-column
              label="序号"
                type="index"
                :index="indexMethod">
              </el-table-column>

              <el-table-column
                label="药品名称"
                width="240">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="数量"
                width="120">
              </el-table-column>
              <el-table-column
                prop="address"
                label="单价(元)"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="address"
                label="服用备注"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="address"
                label="支付状态"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
                  </el-card>
     </div>
     <!-- 微信支付弹框 -->
    <el-dialog :visible.sync="buy_code" width="80rem" @close="buy_close">
      <div class="buy_box dis_f_c_c">
        <div id="qrcode" ref="qrcode" class="img1 dis_f_c_c"></div>
        <el-card class="box-card" style="margin: 10px">
           <el-row>
               <el-descriptions>
            <el-descriptions-item label="订单号">kooriookami</el-descriptions-item>
            <el-descriptions-item label="总金额">18100000000</el-descriptions-item>

        </el-descriptions>
           </el-row>
        </el-card>
        <img src="" class="img2" alt="" />
      </div>
    </el-dialog>


    </div>

</template>

<script>
//支付组件
import QRCode from 'qrcodejs2';
export default {
    data() {
        return {
          buy_code:false,
            xianshi:false,
            patient: {
                gender: "3",
            },

            idcard: "",
            dept: {
                id:"",
                name:"",
                doctor:{
                    schedule:{
                        scheduletime:""
                    }
                },

            },
            tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },  {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],


        }

    },
    methods: {
        handleChange(value) {
        },
        dianji(){
            this.xianshi=true
        },
        indexMethod(index) {
        return index +1;
      },
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      pay(){

         this.buy_code = true;//显示二维码弹窗
              //循环请求查看是否支付成功
              this.timer1 = setInterval(() => {
                this.wx_time(order);
              }, 500);
              //使用nextTick确保在弹框显示前二维码数据渲染，不加的话可能报错获取不到qrcode元素

                this.qrcode = new QRCode("qrcode", {
                  width: 150,//二维码宽度，失效中
                  height: 150,//二维码高度
                  text: res.data.data,//调用微信支付接口返回的微信特殊链接：例如"weixin://wxpay/bizpayurl?pr=uDKsQ4E00"
                  colorDark: "#000",//颜色配置
                  colorLight: "#fff",
                });


      }

},
    }


</script>




